//插件/模块引入
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')




module.exports ={ //配置对象
    entry:'./src/index.js' , //设置入口文件,

    output:{ //配置出口文件
        // 配置文件名
        filename: 'webpackapp.js', 
        /* 这里path 要设置绝对路径 通过nodeJS模块可以实现
        所以可以引入path这个模块
            resolve是个方法 :__dirname 可获取绝对路径, dist:参数
            基于第一个参数去解析当前目录下的dist
        */
        path: path.resolve(__dirname, 'dist'),
        clean:true,
    }, //运行npx webpack 则实现按照以上配置打包

    mode:'development',  //配置开发环境  /***development:开发环境 */
    devtool: 'inline-source-map',//快速定位真实错误代码位置
    plugins:[
        // 插件实例化
        new HtmlWebpackPlugin(
            //配置选项
            {
              template:'./index.html' ,  // 配置模板
              filename:'app.html' ,  //配置文件名
              inject:'body'   // 设置在哪个标签内生成
            }
        ) //自动添加script标签并引入js
    ],

    devServer:{ // 配置启动服务设置
        static:'./dist' // 设置启动文件的根目录
    },

    module:{
        // 使用loader
        rules:[
            {
               test:'/\.png$/' ,//配置解析的扩展名
               type:'asset/resource' ,//配置加载图片资源
            }
        ]
    },














}